<div class="projects-container" fxLayout="row" fxLayoutWrap.gt-sm="wrap">

  <div class="project mat-elevation-z4" fxFlex="calc(33.3333% - 24px)">

    <div class="header" style="background: linear-gradient(to left, rgb(203, 173, 109), rgb(213, 51, 105));">
      <div class="content">
        <div fxFlex="auto" fxLayout="column">
          <div class="top-row" fxLayout="row" fxLayoutAlign="space-between center">
            <div class="">2017年10月01日</div>
            <button mat-icon-button>
              <mat-icon>more_horiz</mat-icon>
            </button>

          </div>
          <div class="codename" fxFlex="auto" fxLayout="row" fxLayoutAlign="center center">
            angular项目
          </div>
        </div>
      </div>
    </div>

    <div class="details">
      <div class="content">
        <div class="name">产品改进</div>
        <div class="members" fxLayout="row">
          <div class="member ">
            <img class="" src="assets/img/demo/avatars/1.png">
          </div>
          <div class="member ">
            <img class="" src="assets/img/demo/avatars/7.png">
          </div>
          <div class="member ">
            <img class="" src="assets/img/demo/avatars/9.png">
          </div>
          <div class="member ">
            <img class="" src="assets/img/demo/avatars/3.png">
          </div>
        </div>
        <div class="divider"></div>
        <div class="status success ongoing">进行中</div>
      </div>
    </div>

    <div class="overlay">
      <div class="overlay-content" fxLayout="column" fxLayoutAlign="space-between">
        <div class="overlay-actions" fxLayout="row" fxLayoutgap="16px"
            >
          <button mat-icon-button>
            <mat-icon>edit</mat-icon>
          </button>
          <button mat-icon-button>
            <mat-icon>backup</mat-icon>
          </button>
          <button mat-icon-button>
            <mat-icon>delete</mat-icon>
          </button>

        </div>

        <button mat-raised-button><span class="mat-button-wrapper">查看详情</span></button>

      </div>
    </div>
  </div>

  <div class="project mat-elevation-z4" fxFlex="calc(33.3333% - 24px)">

    <div class="header" style="background: linear-gradient(to left, rgb(203, 173, 109), rgb(213, 51, 105));">
      <div class="content">
        <div class="" fxFlex="auto" fxLayout="column">
          <div class="top-row" fxLayout="row" fxLayoutAlign="space-between center">
            <div class="">2017年10月01ri</div>
            <button mat-icon-button>
              <mat-icon>more_horiz</mat-icon>
            </button>

          </div>
          <div class="codename" fxFlex="auto" fxLayout="row" fxLayoutAlign="center center">
            angular项目
          </div>
        </div>
      </div>
    </div>

    <div class="details">
      <div class="content">
        <div class="name">产品改进</div>
        <div class="members" fxLayout="row">
          <div class="member ">
            <img class="" src="assets/img/demo/avatars/1.png">
          </div>
          <div class="member ">
            <img class="" src="assets/img/demo/avatars/7.png">
          </div>
          <div class="member ">
            <img class="" src="assets/img/demo/avatars/9.png">
          </div>
          <div class="member ">
            <img class="" src="assets/img/demo/avatars/3.png">
          </div>
        </div>
        <div class="divider"></div>
        <div class="status success ongoing">进行中</div>
      </div>
    </div>

    <div class="overlay">
      <div class="overlay-content" fxLayout="column" fxLayoutAlign="space-between">
        <div class="overlay-actions" fxLayout="row" fxLayoutgap="16px"
            >
          <button mat-icon-button>
            <mat-icon>edit</mat-icon>
          </button>
          <button mat-icon-button>
            <mat-icon>backup</mat-icon>
          </button>
          <button mat-icon-button>
            <mat-icon>delete</mat-icon>
          </button>

        </div>

        <button mat-raised-button><span class="mat-button-wrapper">查看详情</span></button>

      </div>
    </div>
  </div>

  <div class="project mat-elevation-z4" fxFlex="calc(33.3333% - 24px)">

    <div class="header" style="background: linear-gradient(to left, rgb(203, 173, 109), rgb(213, 51, 105));">
      <div class="content">
        <div class="" fxFlex="auto" fxLayout="column">
          <div class="top-row" fxLayout="row" fxLayoutAlign="space-between center">
            <div class="">2017年10月01ri</div>
            <button mat-icon-button>
              <mat-icon>more_horiz</mat-icon>
            </button>

          </div>
          <div class="codename" fxFlex="auto" fxLayout="row" fxLayoutAlign="center center">
            angular项目
          </div>
        </div>
      </div>
    </div>

    <div class="details">
      <div class="content">
        <div class="name">产品改进</div>
        <div class="members" fxLayout="row">
          <div class="member ">
            <img class="" src="assets/img/demo/avatars/1.png">
          </div>
          <div class="member ">
            <img class="" src="assets/img/demo/avatars/7.png">
          </div>
          <div class="member ">
            <img class="" src="assets/img/demo/avatars/9.png">
          </div>
          <div class="member ">
            <img class="" src="assets/img/demo/avatars/3.png">
          </div>
        </div>
        <div class="divider"></div>
        <div class="status success ongoing">进行中</div>
      </div>
    </div>

    <div class="overlay">
      <div class="overlay-content" fxLayout="column" fxLayoutAlign="space-between">
        <div class="overlay-actions" fxLayout="row" fxLayoutgap="16px"
            >
          <button mat-icon-button>
            <mat-icon>edit</mat-icon>
          </button>
          <button mat-icon-button>
            <mat-icon>backup</mat-icon>
          </button>
          <button mat-icon-button>
            <mat-icon>delete</mat-icon>
          </button>

        </div>

        <button mat-raised-button><span class="mat-button-wrapper">查看详情</span></button>

      </div>
    </div>
  </div>

</div>
